import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { http, API_PATH } from '../utils/http';
import { message } from 'antd';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';

// 文章详情接口
interface ArticleDetail {
    article_id: string;
    title: string;
    content: string;
    content_length: number;
    created_at: number;
    updated_at: number;
    uploader_id: string;
    uploader_name: string;
    derivative_content: string;
    drafting_article: string;
    img_counter: number;
}

// 判断内容是否为 Markdown
const isMarkdownContent = (content: string): boolean => {
    // 检查常见的 Markdown 特征
    const markdownPatterns = [
        /^#\s/m,           // 标题
        /\*\*.+\*\*/,      // 粗体
        /\*.+\*/,          // 斜体
        /\[.+\]\(.+\)/,    // 链接
        /^\s*[-*+]\s/m,    // 无序列表
        /^\s*\d+\.\s/m,    // 有序列表
        /```[\s\S]*?```/,  // 代码块
        /^\s*>\s/m,        // 引用
        /\|.+\|.+\|/,      // 表格
    ];

    return markdownPatterns.some(pattern => pattern.test(content));
};

// 判断内容是否为需要展示的 HTML 代码
const isHtmlCodeContent = (content: string): boolean => {
    // 如果内容为空，直接返回 false
    if (!content || typeof content !== 'string') return false;

    // 去除空白字符以便更准确判断
    const trimmedContent = content.trim();

    // 检查是否包含可能破坏布局的HTML特性
    const containsLayoutBreakingElements = (html: string): boolean => {
        // 检查是否包含表格
        if (/<table[\s>]/i.test(html)) return true;

        // 检查是否包含带宽度样式的元素
        if (/style=["'][^"']*width/i.test(html)) return true;

        // 检查是否包含带width属性的元素
        if (/width=["']\d+(%|px|em|rem)/i.test(html)) return true;

        // 检查是否包含iframe或其他嵌入元素
        if (/<(iframe|embed|object)[\s>]/i.test(html)) return true;

        return false;
    };

    // 显著的HTML文档特征标记
    const significantHtmlMarkers = [
        /^<!DOCTYPE\s+html>/i,        // 以DOCTYPE声明开始
        /^<html(\s|>)/i,              // 以<html>标签开始
        /<html.*?>[\s\S]*<body/i,     // 包含完整的html和body结构
        /<head>[\s\S]*<\/head>/i,     // 包含完整的head标签
    ];

    // 如果包含显著的HTML文档特征，则视为需要特殊处理的HTML代码
    for (const marker of significantHtmlMarkers) {
        if (marker.test(trimmedContent)) {
            return true;
        }
    }

    // 检测是否整个内容都被单个的大型HTML标签包围
    const isCompleteHtmlStructure = /^<[a-z][^>]*>[\s\S]*<\/[a-z][^>]*>$/i.test(trimmedContent) &&
        trimmedContent.length > 100;

    // 计算HTML标签数量
    const tagMatches = trimmedContent.match(/<\/?[a-z][^>]*>/gi) || [];
    const tagCount = tagMatches.length;

    // 如果有大量HTML标签，且包含可能破坏布局的元素
    if (tagCount > 5 && containsLayoutBreakingElements(trimmedContent)) {
        return true;
    }

    // 如果是完整的HTML结构且标签数量超过10，视为HTML代码
    if (isCompleteHtmlStructure && tagCount > 10) {
        return true;
    }

    return false;
};

// 通用内容渲染组件
const ContentRenderer = ({ content }: { content: string }) => {
    const [viewMode, setViewMode] = useState<'render' | 'code'>('render');

    if (!content) return null;

    const shouldRenderAsMarkdown = isMarkdownContent(content);
    const isHtmlCode = isHtmlCodeContent(content);

    // 转义HTML特殊字符，确保代码能正确显示
    const escapeHtml = (unsafe: string) => {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    };

    // 切换视图模式
    const toggleViewMode = () => {
        setViewMode(viewMode === 'render' ? 'code' : 'render');
    };

    // HTML代码显示
    if (isHtmlCode && viewMode === 'code') {
        return (
            <div className="relative w-full">
                <button
                    onClick={toggleViewMode}
                    className="html-view-toggle inline-flex items-center text-xs py-1 px-2 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition-colors shadow-sm"
                >
                    <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    查看渲染效果
                </button>
                <pre className="language-html rounded-md p-3 md:p-4 bg-gray-800 text-gray-100 overflow-x-auto w-full text-xs md:text-sm">
                    <code dangerouslySetInnerHTML={{ __html: escapeHtml(content) }} className="w-full break-all whitespace-pre-wrap" />
                </pre>
            </div>
        );
    }

    // HTML内容渲染
    if (isHtmlCode && viewMode === 'render') {
        return (
            <div className="relative w-full">
                <button
                    onClick={toggleViewMode}
                    className="html-view-toggle inline-flex items-center text-xs py-1 px-2 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition-colors shadow-sm"
                >
                    <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                    </svg>
                    查看HTML代码
                </button>
                <div className="html-content-wrapper w-full">
                    <div dangerouslySetInnerHTML={{ __html: content }} className="article-content w-full" />
                </div>
            </div>
        );
    }

    // Markdown内容渲染
    if (shouldRenderAsMarkdown) {
        return (
            <div>
                <ReactMarkdown
                    remarkPlugins={[remarkGfm]}
                    rehypePlugins={[rehypeRaw]}
                >
                    {content}
                </ReactMarkdown>
            </div>
        );
    }

    // 普通内容渲染
    return (
        <div
            dangerouslySetInnerHTML={{ __html: content }}
            className="article-content"
        />
    );
};

const ArticleDetail: React.FC = () => {
    const navigate = useNavigate();
    const { article_id } = useParams<{ article_id: string }>();
    const [article, setArticle] = useState<ArticleDetail | null>(null);
    const [loading, setLoading] = useState(true);
    const [showConfirmModal, setShowConfirmModal] = useState(false);
    const [copyStatus, setCopyStatus] = useState<{ original?: boolean; derivative?: boolean }>({});

    // 获取文章详情
    const fetchArticleDetail = async () => {
        try {
            setLoading(true);
            const response = await http.get<ArticleDetail>(
                API_PATH.ARTICLE_CENTER.DETAIL(article_id || ''),
                {}
            );

            response.onSuccess(() => {
                if (response.data) {
                    setArticle(response.data);
                } else {
                    console.error('未找到文章详情');
                }
            }).onError((code, msg) => {
                console.error(`获取文章详情失败: 错误码 ${code}, 消息: ${msg}`);
            });
        } catch (error) {
            console.error('网络请求异常:', error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (article_id) {
            fetchArticleDetail();
        }
    }, [article_id]);

    // 返回文章列表
    const handleBack = () => {
        navigate('/article-center');
    };

    // 开始二创
    const startDerivative = async () => {
        try {
            const response = await http.post<{
                article_id: string;
                message_id: string;
            }>(API_PATH.ARTICLE_CENTER.DERIVATIVE, {
                article_id: article_id
            });

            if (response.isSuccess) {
                message.success(response.message);
                // 可以在这里添加其他成功后的处理逻辑
            }
        } catch (error) {
            console.error('网络请求异常:', error);
            message.error('网络请求异常');
        }
    };

    // 处理开始二创按钮点击
    const handleStartCreationClick = () => {
        if (article && (article.derivative_content || article.drafting_article)) {
            setShowConfirmModal(true);
        } else {
            startDerivative();
        }
    };

    // 处理确认重新创作
    const handleConfirmCreation = () => {
        startDerivative();
        setShowConfirmModal(false);
    };

    // 处理取消
    const handleCancelCreation = () => {
        setShowConfirmModal(false);
    };

    // 处理复制
    const handleCopy = async (text: string, type: 'original' | 'derivative') => {
        if (!text) return;
        try {
            await navigator.clipboard.writeText(text);
            setCopyStatus({ [type]: true });
            setTimeout(() => setCopyStatus({ [type]: false }), 1500); // 1.5秒后恢复按钮状态
        } catch (err) {
            console.error('复制失败:', err);
            alert('复制内容失败，请手动复制'); // 简单提示
        }
    };

    // 处理配图按钮点击
    const handleGoToIllustration = () => {
        navigate(`/illustration/${article_id}`);
    };

    // 格式化时间
    const formatTime = (timestamp: number) => {
        const date = new Date(timestamp);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 bg-fixed">
            {/* 背景装饰元素 */}
            <div className="fixed inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 right-[10%] w-64 h-64 bg-indigo-200/20 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '0s' }}></div>
                <div className="absolute top-20 left-[5%] w-96 h-96 bg-purple-200/30 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '-2s' }}></div>
                <div className="absolute top-1/2 left-[40%] w-44 h-44 bg-green-200/30 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '-1s' }}></div>
                <div className="absolute bottom-40 right-[30%] w-72 h-72 bg-yellow-200/30 rounded-full mix-blend-multiply filter blur-2xl opacity-20 animate-floating" style={{ animationDelay: '-3s' }}></div>
            </div>

            {/* 顶部导航栏 */}
            <header className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-10">
                <div className="container mx-auto px-4">
                    <div className="flex justify-between items-center h-16">
                        <div className="flex items-center">
                            <button
                                onClick={handleBack}
                                className="inline-flex items-center px-3.5 py-2 border border-gray-200/70 rounded-lg text-sm font-medium text-gray-700 bg-white/90 hover:bg-indigo-50/80 hover:text-indigo-600 hover:border-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm backdrop-blur-sm"
                            >
                                <svg className="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                                </svg>
                                返回列表
                            </button>
                        </div>
                        <h1 className="text-xl font-semibold text-gray-900 relative">
                            <span className="relative z-10 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">文章详情</span>
                            <span className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-indigo-200 to-purple-200 -z-0 rounded-full transform translate-y-1"></span>
                        </h1>
                        <div className="flex items-center">
                            <button
                                onClick={handleStartCreationClick}
                                className="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200"
                            >
                                <svg className="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
                                </svg>
                                开始二创
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            {/* 主内容区 */}
            <main className="container mx-auto px-4 py-8">
                {loading ? (
                    <div className="flex justify-center items-center py-12">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500"></div>
                    </div>
                ) : article ? (
                    <div className="w-full bg-white rounded-lg shadow-sm border border-gray-100">
                        <div className="p-4 md:p-6">
                            <h1 className="text-2xl font-bold text-gray-900 mb-3">{article.title}</h1>
                            <div className="flex items-center text-sm text-gray-500 space-x-4 mb-4">
                                <span className="flex items-center">
                                    <svg className="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                    {article.uploader_name}
                                </span>
                                <span className="flex items-center">
                                    <svg className="w-4 h-4 mr-1.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    {formatTime(article.created_at)}
                                </span>
                            </div>
                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 w-full mx-auto max-w-none">
                                {/* 左侧：原文内容 */}
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-2 text-lg font-medium text-gray-700">
                                            <svg className="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                            </svg>
                                            <span>原文内容</span>
                                        </div>
                                        {article.content && (
                                            <button
                                                onClick={() => handleCopy(article.content, 'original')}
                                                className={`inline-flex items-center px-2.5 py-1 border rounded-md text-xs font-medium transition-colors duration-200 ${copyStatus.original ? 'bg-green-100 text-green-700 border-green-200' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border-gray-200'}`}
                                            >
                                                <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                                </svg>
                                                {copyStatus.original ? '已复制' : '复制'}
                                            </button>
                                        )}
                                    </div>
                                    <div className="bg-gray-50 rounded-lg border border-gray-200 p-3 md:p-4 overflow-hidden">
                                        <div className="content-container w-full overflow-hidden">
                                            <ContentRenderer content={article.content} />
                                        </div>
                                    </div>
                                </div>
                                {/* 右侧：二创内容 */}
                                <div className="space-y-3">
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-2 text-lg font-medium text-gray-700">
                                            <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                            <span>二创内容</span>
                                        </div>
                                        {(article.derivative_content || article.drafting_article) && (
                                            <div className="flex items-center gap-2">
                                                <div className="flex items-center">
                                                    <span className="text-sm text-gray-500 mr-1">配图数：</span>
                                                    <span className="px-2 py-0.5 bg-purple-50 text-purple-600 rounded-md text-sm font-medium">
                                                        {article.img_counter}
                                                    </span>
                                                </div>
                                                {article.img_counter > 0 && (
                                                    <button
                                                        onClick={handleGoToIllustration}
                                                        className="inline-flex items-center px-2.5 py-1 border border-purple-200 rounded-md text-xs font-medium text-purple-600 bg-purple-50 hover:bg-purple-100 transition-colors duration-200"
                                                    >
                                                        <svg className="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                        </svg>
                                                        去配图
                                                    </button>
                                                )}
                                                <button
                                                    onClick={() => handleCopy(article.derivative_content || article.drafting_article, 'derivative')}
                                                    className={`inline-flex items-center px-2.5 py-1 border rounded-md text-xs font-medium transition-colors duration-200 ${copyStatus.derivative ? 'bg-green-100 text-green-700 border-green-200' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border-gray-200'}`}
                                                >
                                                    <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                                    </svg>
                                                    {copyStatus.derivative ? '已复制' : '复制'}
                                                </button>
                                            </div>
                                        )}
                                    </div>
                                    <div className="bg-gray-50 rounded-lg border border-gray-200 p-3 md:p-4 overflow-hidden">
                                        <div className="content-container w-full overflow-hidden">
                                            <ContentRenderer content={article.derivative_content || article.drafting_article} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                ) : (
                    <div className="text-center py-12 text-gray-500">
                        文章不存在或已被删除
                    </div>
                )}
            </main>

            {/* 确认弹窗 */}
            {showConfirmModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
                    <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
                        <h3 className="text-lg font-medium leading-6 text-gray-900 mb-4">确认操作</h3>
                        <div className="text-sm text-gray-600 mb-6">
                            当前已有二创内容，确定要重新创作吗？
                        </div>
                        <div className="flex justify-end gap-3">
                            <button
                                onClick={handleCancelCreation}
                                className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                            >
                                取消
                            </button>
                            <button
                                onClick={handleConfirmCreation}
                                className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                            >
                                确认重新创作
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* 添加动画样式 */}
            <style dangerouslySetInnerHTML={{
                __html: `
                @keyframes floating {
                    0% {
                        transform: translateY(0px);
                    }
                    50% {
                        transform: translateY(-5px);
                    }
                    100% {
                        transform: translateY(0px);
                    }
                }
                
                .animate-floating {
                    animation: floating 4s ease-in-out infinite;
                }
                
                @keyframes scalein {
                    0% {
                        opacity: 0;
                        transform: scale(0.95);
                    }
                    100% {
                        opacity: 1;
                        transform: scale(1);
                    }
                }
                
                .animate-scalein {
                    animation: scalein 0.2s ease-out;
                }
                
                /* 富文本内容样式 */
                .whitespace-pre-wrap img {
                    max-width: 100%;
                    height: auto;
                    display: block;
                    margin: 0.5rem auto;
                    border-radius: 0.375rem;
                }
            `}} />

            {/* 添加 Markdown 样式 */}
            <style dangerouslySetInnerHTML={{
                __html: `
                /* Markdown 样式 */
                .prose {
                    color: #374151;
                    max-width: 65ch;
                    font-size: 1rem;
                    line-height: 1.75;
                }
                .prose p {
                    margin-top: 1.25em;
                    margin-bottom: 1.25em;
                }
                .prose img {
                    max-width: 100%;
                    height: auto;
                    display: block;
                    margin: 0.5rem auto;
                    border-radius: 0.375rem;
                }
                .prose a {
                    color: #4f46e5;
                    text-decoration: underline;
                    font-weight: 500;
                }
                .prose h1, .prose h2, .prose h3, .prose h4 {
                    color: #111827;
                    font-weight: 600;
                    line-height: 1.25;
                    margin-top: 2em;
                    margin-bottom: 1em;
                }
                .prose code {
                    color: #4f46e5;
                    background-color: #f3f4f6;
                    padding: 0.2em 0.4em;
                    border-radius: 0.25em;
                    font-size: 0.875em;
                }
                .prose pre {
                    background-color: #1f2937;
                    color: #f3f4f6;
                    overflow-x: auto;
                    padding: 1em;
                    border-radius: 0.375rem;
                    margin: 1.25em 0;
                }
                .prose pre code {
                    color: inherit;
                    background-color: transparent;
                    padding: 0;
                }
                .prose blockquote {
                    border-left: 4px solid #e5e7eb;
                    padding-left: 1em;
                    color: #6b7280;
                    font-style: italic;
                    margin: 1.25em 0;
                }
                .prose ul, .prose ol {
                    padding-left: 1.25em;
                    margin: 1.25em 0;
                }
                .prose li {
                    margin: 0.5em 0;
                }
                .prose table {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 1.25em 0;
                }
                .prose th, .prose td {
                    border: 1px solid #e5e7eb;
                    padding: 0.5em;
                    text-align: left;
                }
                .prose th {
                    background-color: #f9fafb;
                    font-weight: 600;
                }
                `
            }} />

            {/* 添加富文本样式 */}
            <style dangerouslySetInnerHTML={{
                __html: `
                /* 内容容器样式 */
                .content-container {
                    width: 100%;
                    max-width: 100%;
                    overflow-x: hidden;
                }
                
                /* 强制内部元素宽度 */
                .content-container * {
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                    overflow-wrap: break-word !important;
                    word-wrap: break-word !important;
                }
                
                /* 特殊处理表格 */
                .content-container table {
                    display: block !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    overflow-x: auto !important;
                    font-size: 14px;
                }
                
                /* 防止内联样式破坏布局 */
                .content-container [style*="width"],
                .content-container [width] {
                    width: auto !important;
                    max-width: 100% !important;
                }
                
                /* 确保图片不会超出容器 */
                .content-container img {
                    height: auto !important;
                    max-width: 100% !important;
                    object-fit: contain !important;
                }
                
                /* HTML代码显示样式 */
                pre.language-html {
                    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
                    font-size: 0.85rem;
                    line-height: 1.6;
                    padding: 1rem;
                    max-height: 500px;
                    overflow-y: auto;
                    white-space: pre-wrap;
                    word-break: break-all;
                }
                
                pre.language-html code {
                    color: #e0e0e0;
                }
                
                /* 按钮样式优化 */
                .html-view-toggle {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    z-index: 10;
                    opacity: 0.8;
                    transition: opacity 0.2s;
                }
                
                .html-view-toggle:hover {
                    opacity: 1;
                }
                
                /* HTML内容包装器 */
                .html-content-wrapper {
                    position: relative;
                    width: 100%;
                    max-width: 100%;
                    overflow: hidden;
                }
                
                .html-content-wrapper * {
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                    word-break: break-word !important;
                }
                
                /* 防止iframe等内容溢出 */
                .html-content-wrapper iframe,
                .html-content-wrapper embed,
                .html-content-wrapper object {
                    max-width: 100% !important;
                    width: 100% !important;
                }
                
                /* 响应式容器调整 */
                @media (min-width: 1024px) {
                    .container {
                        max-width: 90%;
                    }
                }
                
                @media (min-width: 1536px) {
                    .container {
                        max-width: 85%;
                    }
                }
                `
            }} />
        </div>
    );
};

export default ArticleDetail;